<template>
  <div class="flow-row">
    <div class="flow-branch">
      <!-- <div class="branch-node" @click="!readable && addBranch(node)">
        <img :src="branchPlusIcon"/>
      </div> -->
      <el-button class="branch-node" @click="!readable && addBranch(node)" round>添加条件</el-button>
      <div class="meet-node"></div>
      <div class="flow-col" v-for="(branch, index) in node.branchs" :key="branch.id">
        <div class="clear-left-border" v-if="index == 0"></div>
        <div class="clear-right-border" v-if="node.branchs.length - 1 == index"></div>
        <div class="flow-row">
          <div class="flow-box">
            <!-- 其他情况不支持配置 -->
            <div class="flow-item flow-node-branch"
                 @click="!readable && node.branchs.length - 1 != index && open('flowBranchSetting', branch, node)">
              <div class="flow-node-box" :class="{ 'has-error': branch.error }">
                <div class="node-name">
                  <EditName v-model:value="branch.name"
                            @edit="(showPriorityLevel) => (branch.props.showPriorityLevel = showPriorityLevel)"/>
                  <div class="node-name-level" v-if="branch.props.showPriorityLevel">
                    优先{{ branch.props.priorityLevel }}
                  </div>
                  <!--                  <img :src="branchIcon" style="margin-left: 10px"/>-->
                </div>
                <div class="node-main">
                  <span v-if="branch.content">
                    {{ branch.content }}
                  </span>
                  <span v-else class="hint-title">配置筛选条件</span>
                </div>
                <!-- 错误提示 -->
                <!--                <a-icon v-if="conditionNode.error" type="exclamation-circle" theme="filled" class="node-error" />-->
                <i v-if="branch.error" type="exclamation-circle" theme="filled"
                   class="node-error el-icon-warning-outline"></i>
                <!-- 删除按钮,其他情况不支持删除 -->
                <div v-if="!readable && !branch.deletable && node.branchs.length - 1 != index"
                     class="close-icon">
                  <!--                  <a-icon type="close-circle" @click.stop="conditionNode.deletable = true" />-->
                  <el-icon @click.stop="branch.deletable = true">
                    <CircleClose/>
                  </el-icon>

                  <!-- <i class="el-icon-circle-close" @click.stop="branch.deletable = true"/> -->
                </div>
                <!-- 删除提示 -->
                <DeleteConfirm :node="branch"/>
              </div>
            </div>
            <FlowAddNode :node="node" @update:node="node = $event" :nodeType="3" :id="branch.id" :readable="readable"/>
          </div>
        </div>
        <FlowNode v-if="branch.childNode && branch.childNode.hasOwnProperty('name')"
                  :node="branch.childNode" :readable="readable"/>
      </div>
    </div>
    <div class="after-branch-btn">
      <FlowAddNode :node="node" @update:node="node = $event" :nodeType="4" :readable="readable"/>
    </div>
    <FlowConditionDrawer ref="flowConditionDrawer" @close="isActive = false"/>
  </div>
</template>
<script setup name="FlowConditionNode">
// import {flowMixin} from '../../mixins/flowMixin';
import FlowNode from './FlowNode.vue';
import FlowAddNode from '../flowAddNode.vue';
import FlowConditionDrawer from '../drawer/FlowConditionDrawer.vue';
import EditName from '../../../common/EditName.vue';
import DeleteConfirm from '../../../common/DeleteConfirm.vue';
import flowhook from '../../../mixins/flowhook';
// import node from "@/views/flow/common/process/nodes/Node";
import {reactive, ref, createApp, defineEmits, defineProps, computed, onMounted, toRefs} from "vue";
import {useStore} from "vuex";
/* 组件局部注册 */
const store = useStore();

const {nameClass, branchPlusIcon} = flowhook();

const flowConditionDrawer = ref(null);

const isActive = ref(false);

const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return {};
    },
  },
  readable: {
    type: Boolean,
    default: false,
  },
})

/**
 * 添加分支节点
 * @param {*} node
 */

const addBranch = (node) => {
  console.log("store------------------dispatch:", store);
  store.dispatch("process/addBranch", node);
};


const open = (name, node, routeNode) => {
  console.log("------开始提示-------")
  isActive.value = true;
  flowConditionDrawer.value.showDrawer(node, routeNode);
}
// export default {
//   name: 'BranchNode',
//   components: {FlowNode, FlowAddNode, FlowBranchSetting, EditName, DeleteConfirm},
//   mixins: [flowMixin],
//   props: {
//     node: {
//       type: Object,
//       default: function () {
//         return {};
//       },
//     },
//     readable: {
//       type: Boolean,
//       default: false,
//     },
//   },
//   data() {
//     return {};
//   },
//   methods: {},
//   mounted() {
//     console.log("------------->",JSON.stringify(node));
//   }
// };

</script>
